<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="reserve-date">
        <basic-container>
            <div class="date-button-group">
                 <el-button type="primary" @click="alarmHandle">保存</el-button>
                 <el-button type="success" @click="setWork">全选工作日</el-button>
            </div>
            <a-calendar @panelChange="onPanelChange" @select="onSelect">
                <div slot="dateCellRender" slot-scope="value" class="events">
                    {{getListData(value)}}
                </div>
            </a-calendar>
        </basic-container>
    </div>
</template>

<script>
    import {getDateObj,  putObj} from '@/api/reserve/reservedate'
    import {tableOption} from '@/const/crud/reserve/reservedate'
    import {getCurrentDate, dateFormat} from '@/util/date'

    export default {
        name: 'reservedate',
        data() {
            return {
                searchForm: {},
                tableData: [],
                listData: [],
                month: getCurrentDate('month'),
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                weekDayList: [],
                tableLoading: false,
                tableOption: tableOption
            }
        },
        created() {
            this.init()
        },
        methods: {
            getListData(value) {
                let content = ''
                let dates = dateFormat(new Date(value), 'yyyy-MM-dd')
                let month = dateFormat(new Date(value), 'yyyy-MM')
                let weekDay = value.day()
                if (weekDay !== 0 && weekDay !== 6 && month === this.month && this.weekDayList.indexOf(dates) === -1) {
                    this.weekDayList.push(dates)
                }
                if (this.listData.filter(item => {
                    return item === dates
                }).length > 0) {
                    content = '✔️'
                }
                return content;
            },
            setWork() {
                this.listData = this.weekDayList
                // this.alarmHandle()
            },
            onPanelChange(value, mode) {
                this.month = dateFormat(new Date(value), 'yyyy-MM')
                this.weekDayList = []
                this.init()
            },
            onSelect(value) {
                let dates = dateFormat(new Date(value), 'yyyy-MM-dd')
                let index = this.listData.indexOf(dates)
                if (index > -1) {
                    this.listData.splice(index, 1);
                } else {
                    this.listData.push(dates)
                }
            },
            alarmHandle() {
                 this.$confirm('确定保存?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        dateList: this.listData,
                        month: this.month,
                        reserveType: 'salon'
                    }
                    putObj(params).then(response => {
                        this.$message.success('保存成功')
                        this.init()
                    })
                })
            },
            init() {
                let params = {
                    month: this.month,
                    reserveType: 'salon'
                }
                getDateObj(params).then(response => {
                    this.listData = response.data.data
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.reserve-date{
    position: relative;
    .date-button-group{
        position: absolute;
        top: 45px;
        left: 50px;
    }
    /deep/.ant-fullcalendar-header{
        .ant-radio-group{
            display: none;
        }
    }
    .events{
        text-align: center;
        font-size: 20px;
        color: #1989FA;
        line-height: 55px;
    }
}

</style>
